<template>
  <n-card :bordered="false" class="h-full rounded-8px shadow-sm">
    <n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
      <n-grid-item v-if="cardData.length" v-for="item in cardData" :key="item.id">
        <gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
          <h3 class="text-16px">{{ item.title }}</h3>
          <div class="flex justify-between pt-12px">
            <svg-icon :icon="item.icon" class="text-32px" />
            <count-to :prefix="item.unit" :start-value="0" :end-value="item.value" :decimals="2"
              class="text-30px text-white dark:text-dark" />
          </div>
        </gradient-bg>
      </n-grid-item>
    </n-grid>
  </n-card>
</template>

<script setup lang="ts">
import { GradientBg } from './components';
import { selectAllOperators2, selectDistributionData } from '@/service';
import { reactive, ref } from 'vue';
import { localStg } from '@/utils';
defineOptions({ name: 'DashboardAnalysisDataCard' });

const { operator_role_id } = localStg.get('userInfo') || {};

const cardData: any = ref([]);

// 获取管理员首页数据
async function getAllOperators2() {
  let { data } = await selectAllOperators2()
  if (data) {
    cardData.value = [
      {
        id: 'total_income',
        title: '总收益',
        value: data.total_income,
        unit: '',
        colors: ['#ec4786', '#b955a4'],
        icon: 'ant-design:bar-chart-outlined'
      },
      {
        id: 'total_recharge',
        title: '总充值人数',
        value: Number(data.total_recharge),
        unit: '',
        colors: ['#865ec0', '#5144b4'],
        icon: 'ant-design:money-collect-outlined'
      },
      {
        id: 'total_users',
        title: '总用户',
        value: Number(data.total_users),
        unit: '',
        colors: ['#56cdf3', '#719de3'],
        icon: 'icon-park:every-user'
      },
      {
        id: 'yesterday_total_income',
        title: '昨日总收益',
        value: Number(data.yesterday_total_income),
        unit: '',
        colors: ['#fcbc25', '#f68057'],
        icon: 'ant-design:bar-chart-outlined'
      },
      {
        id: 'yesterday_total_recharge',
        title: '昨日总充值人数',
        value: Number(data.yesterday_total_recharge),
        unit: '',
        colors: ['#fc2c25', '#f48057'],
        icon: 'ant-design:money-collect-outlined'
      },
      {
        id: 'yesterday_total_users',
        title: '昨日总用户',
        value: Number(data.yesterday_total_users),
        unit: '',
        colors: ['#fcbc95', '#f60057'],
        icon: 'icon-park:every-user'
      }
    ]
  }
}

async function getSelectDistributionData() {
  let { data } = await selectDistributionData()
  if(data) {
    cardData.value = [
      {
        id: 'total_income',
        title: '总收益',
        value: Number(data.total_income),
        unit: '',
        colors: ['#ec4786', '#b955a4'],
        icon: 'ant-design:bar-chart-outlined'
      },
      {
        id: 'views',
        title: '总浏览量',
        value: Number(data.views),
        unit: '',
        colors: ['#865ec0', '#5144b4'],
        icon: 'ant-design:money-collect-outlined'
      },
      {
        id: 'payment_number',
        title: '总付费人数',
        value: Number(data.payment_number),
        unit: '',
        colors: ['#56cdf3', '#719de3'],
        icon: 'icon-park:every-user'
      },
      {
        id: 'yesterday_income',
        title: '昨日收益',
        value: Number(data.yesterday_income),
        unit: '',
        colors: ['#fcbc25', '#f68057'],
        icon: 'ant-design:bar-chart-outlined'
      },
      {
        id: 'add_payment_number',
        title: '昨日新增付费人数',
        value: Number(data.add_payment_number),
        unit: '',
        colors: ['#fc2c25', '#f48057'],
        icon: 'ant-design:money-collect-outlined'
      },
      {
        id: 'add_views',
        title: '昨日新增浏览量',
        value: Number(data.add_views),
        unit: '',
        colors: ['#fcbc95', '#f60057'],
        icon: 'icon-park:every-user'
      }
    ]
  }
}

function init() {
  if (operator_role_id == 1) {
    getAllOperators2()
  } else if (operator_role_id == 2) {
    getSelectDistributionData()
  } else {

  }
}

init()

</script>

<style scoped></style>
